<template>
  <div id='TerrainContainer'></div>
</template>

<script>
export default {
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initCesium()
    this.addClock(this.viewer)
  },
  methods: {
    initCesium() {
      //方式一
      var clock = new Cesium.Clock({
        startTime : Cesium.JulianDate.fromIso8601("2018-12-25"),
        currentTime : Cesium.JulianDate.fromIso8601("2018-12-25"),
        stopTime : Cesium.JulianDate.fromIso8601("2018-12-26"),
        clockRange : Cesium.ClockRange.CLAMPED,
        clockStep : Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
        multiplier: 10000.0, // how much time to advance each tick
        shouldAnimate: true // Animation on by default
      })
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlOTExNTU4NC1lMDFlLTRiYTYtOTRmZi0zNDAwZWFjMjMxNDAiLCJpZCI6MTU5NTIsImlhdCI6MTYwNjY0MDc4MH0.DEgc4-h5oyP530dPxa1YKpXqzCAzUagibRB9bHm5QQs';

      this.viewer = new Cesium.Viewer('TerrainContainer', {
        animation: true,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: true,
        selectionIndicator: false, //是否显示选取指示器组件
        shouldAnimate: true, //自动播放动画控件
        shadows: true, //是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D,
        clockViewModel:new Cesium.ClockViewModel(clock),
        terrainProvider: new Cesium.CesiumTerrainProvider({//地质开挖必须是cesium提供的地形
          url: Cesium.IonResource.fromAssetId(1),
          requestVertexNormals: true,//顶点法线效果
          requestWaterMask: true//水效果
        })
      })
      //地质开挖不能有深度测试，有深度测试会被遮盖
      this.viewer.scene.globe.depthTestAgainstTerrain = false;
      this.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
    },
    addClock(viewer) {
      //每一帧渲染的时间
      viewer.clock.onTick.addEventListener(function(clock) {
        console.log('每一帧渲染的时间')
      });

      //clock结束的时间触发
      viewer.clock.onStop.addEventListener(function(clock) {
        console.log('clock结束的时间触发')
      });
    }
  }
}
</script>
<style scoped>
#TerrainContainer {
  height: 100%;
  width: 100%;
  background-color: red;
}
</style>
